<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="//unpkg.com/layui@2.9.20/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
        <a href="javascript:;">
          <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
          <span>{{ username }}</span>
        </a>
        <dl class="layui-nav-child">
          <dd><a href="javascript:location.href='/login';">退出登录</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a href="javascript:iframeBody({% url 'containers' %});">容器管理</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:test();">文件管理</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">文件列表</a></dd>
            <dd><a href="javascript:;">回收站</a></dd>
          </dl>
        </li>
        
      </ul>
    </div>
  </div>
  <div class="layui-body">
    <iframe class="iframe" name="iframe" src=""></iframe>
  </div>
</div>
</body>
</html>

<script src="//unpkg.com/layui@2.9.20/dist/layui.js"></script>
<script>
  var username = "{{ username }}";
  layui.use(function(){
    var layer = layui.layer;
    // Welcome
    layer.msg('Hello World', {icon: 6});
  });

    function test(){
        console.log("test")
        const iframe = document.querySelector('.iframe');
        iframe.src = 'testBody2.html';
    }

  function iframeBody(page){
  console.log(page)
        const iframe = document.querySelector('.iframe');
        iframe.src = page;
  }

</script>
<style>
  .iframe{
    width: 100%;
    height: 100%;
  }
</style>